<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">

    <router-link to="/home" tag="button">首页</router-link> &nbsp;&nbsp;
    <router-link to="/about">关于</router-link>
    <h2>hello world</h2>
    <button @click="homeClick">首页</button>
    <button @click="aboutClick">关于</button>
    <router-view></router-view>
    <!--<HelloWorld msg="Welcome to Your Vue.js App"/>-->
    <TestWorld />
  </div>
</template>

<script>
/*
import HelloWorld from './components/HelloWorld.vue'
import TestWorld from './components/TestWorld.vue'
*/
export default {
  name: 'App',
  methods:{
    homeClick(){
      //this.$router.push("/home");
      this.$router.replace("/home")
      console.log("home");
    },
    aboutClick(){
      //this.$router.push("/about");
      this.$router.replace("/about");
      console.log("about");
    }
  },
  components: {
    //HelloWorld,
    //TestWorld,
  }
}

</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
  .router-link-active{
    color: #f00;
  }
</style>
